* {
    color: #fff;
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .videoBox {
        width: 100%;
        height: calc(100% - 90px);
        background-color: #000;

        .video {
            top: calc(50% - 110px);
        }

        .title {
            left: 20px;
            bottom: 20px;
            .num {
                color: #fff;
                margin-bottom: 10px;
            }

            .text {
                color: #fff;
            }
        }
    }

    .control {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 90px;
        .prog{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 90px;
            background-color:skyblue;
        }
        .prev,
        .play,
        .stop,
        .next {
            width: 90px;
            height: 90px;
        }

        .play {
            display: none;
        }

        i {
            color: #101010;
            font-size: 40px;
            top: calc(50% - 20px);
            left: calc(50% - 20px);
        }
    }

    .mantle {
        width: 100%;
        height: 100%;
        background-color: rgba(135, 206, 235, .9);
        display: none;

        .text {
            margin-top: 20px;
        }

        .btnBox {
            display: flex;
            justify-content: space-around;
            padding-top: 50px;
            width: 90%;
            height: 300px;
            margin-left: 5%;
            top: calc(50% - 150px);

            .btn {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: #00ff99;

                i {
                    font-size: 30px;
                    top: calc(50% - 20px);
                    left: calc(50% - 12px);
                }

                .text {
                    top: 50%;
                    left: calc(50% - 20px);
                }
            }

            .btn1 {
                background-color: rgb(252, 72, 72);
                ;

            }

        }

        .textBox {
            display: flex;
            border: 1px solid #fff;
            width: 70%;
            height: 120px;
            margin-left: 15%;
            top: 54%;

            .imgBox {
                width: 50%;
                height: 100%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .msgBox {
                width: 50%;
                height: 100%;
                padding-top: 20px;

                .msg {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}